<template>
  <div class="page">

    <el-card>
      <p class="title-name">个人合伙人协议</p>
      <div class="updated-time">最近一次更新时间：{{ this.personal ? this.personal.updated_at : ""  }}</div>
      <br />
      <div style="width: 80%;margin: auto;">
        <div >
          <vue-ueditor-wrap ref="aa" v-model="personalDetail" :config="myConfig"></vue-ueditor-wrap>
        </div>
        <br />
        <div style="text-align: center;">
          <el-button type="success" @click="setPersonalCooperationAgreement">发布</el-button>
        </div>
      </div>
    </el-card>

    <el-card>
      <p class="title-name">企业合伙人协议</p>
      <div class="updated-time">最近一次更新时间：{{ this.enterprise ? this.enterprise.updated_at : ""  }}</div>
      <br />
      <div style="width: 80%;margin: auto;">
        <div >
          <vue-ueditor-wrap  v-model="enterpriseDetail" :config="myConfig"></vue-ueditor-wrap>
        </div>
        <br />
        <div style="text-align: center;">
          <el-button type="success" @click="setEnterpriseCooperationAgreement">发布</el-button>
        </div>
      </div>
    </el-card>


  </div>
</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
  export default {
    name: "agreement",
    components: { VueUeditorWrap },
    data() {
      return {
        personalDetail: "",
        enterpriseDetail: "",
        personal: null,
        enterprise: null,
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 500,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          // serverUrl: 'http://35.201.165.105:8000/controller.php',
          serverUrl: 'https://wxapp.gdhrma.org.cn/ueditor-php/controller.php',
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          //UEDITOR_HOME_URL: '/peoples_association_backstage/dist//static/UEditor/'
          UEDITOR_HOME_URL: '/UEditor/',
          zIndex: 10001,
          toolbars: [
            [
              'undo', 'redo', '|',
              'bold', 'italic', 'underline', 'strikethrough',
              'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
              'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
              'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
              'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
              'simpleupload', 'insertimage', 'insertvideo', 'music',
              'horizontal', 'date', 'time',
              'inserttable','link'

            ]
          ]
        },
      }
    },
    mounted() {
      this.getPersonalCooperationAgreement();
      this.getEnterpriseCooperationAgreement();
      this.test()
    },
    methods: {
      // 获取个人合作协议
      async getPersonalCooperationAgreement() {
        const res = await this.$api.getPersonalCooperationAgreement();
        if (res.data.level === 'success') {
          this.personal = res.data.data;
          this.personalDetail = res.data.data ? res.data.data.detail : '';
        } else {
          this.$message.error(res.data.message);
        }
      },

      // 获取企业合作协议
      async getEnterpriseCooperationAgreement() {
        const res = await this.$api.getEnterpriseCooperationAgreement();
        if (res.data.level === 'success') {
          this.enterprise = res.data.data;
          this.enterpriseDetail = res.data.data ? res.data.data.detail : '';
        } else {
          this.$message.error(res.data.message);
        }
      },

      // 设置个人合作协议
      async setPersonalCooperationAgreement() {
        const res = await this.$api.setPersonalCooperationAgreement({ detail: this.personalDetail });
        if (res.data.level === 'success') {
          await this.getPersonalCooperationAgreement()
        }
        this.$message({ message: res.data.message, type: res.data.level })
      },

      // 设置企业合作协议
      async setEnterpriseCooperationAgreement() {
        const res = await this.$api.setEnterpriseCooperationAgreement({ detail: this.enterpriseDetail });
        if (res.data.level === 'success') {
          await this.getEnterpriseCooperationAgreement()
        }
        this.$message({ message: res.data.message, type: res.data.level })
      },

      test() {
        console.log(this.$refs.aa);
      },
    },
  }
</script>

<style lang="scss" scoped>
  .title-name {
    text-align: center;
  }
  .updated-time {
    width: 80%;
    margin: 0 auto;
  }
</style>
